<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div class="drawn-item" id="drawn-bar"></div>
      </el-col>
      <el-col :span="12">
        <div class="drawn-item" id="drawn-pie"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="drawn-item" id="drawn-donut"></div>
      </el-col>
      <el-col :span="12">
        <div class="drawn-item" id="drawn-line"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Drawn from 'rough-viz'
export default {
  name: 'drawn',
  data () {
    return {
      drawnBar: null,
      drawnPie: null,
      drawnDonut: null,
      drawnLine: null
    }
  },
  methods: {},
  mounted () {
    this.drawnBar = new Drawn.Bar({
      element: '#drawn-bar', // container selection
      data: {
        labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
        values: [12, 34, 23, 56, 67, 11, 20, 22, 30, 89, 100, 120]
      },
      // bowing: 20,
      roughness: 1,
      // margin: {left: 0, bottom: 0, right: 0, top: 0}
      title: 'num bar',
      titleFontSize: '18px',
      xLabel: 'date',
      yLabel: 'num',
      labelFontSize: '14px',
      fillWeight: 3
    })
    this.drawnPie = new Drawn.Pie({
      element: '#drawn-pie',
      data: {
        labels: ['js', 'java', 'html'],
        values: [100, 90, 80]
      },
      title: 'pie',
      titleFontSize: '18px',
      // roughness: 3,
      // fillStyle: 'cross-hatch'
      // fillStyle: 'dashed'
      // fillStyle: 'zigzag-line',
      strokeWidth: 3,
      innerStrokeWidth: 2,
      fillStyle: 'cross-hatch',
      fillWeight: 3.5
    })
    this.drawnDonut = new Drawn.Donut({
      element: '#drawn-donut',
      data: {
        labels: ['html', 'javascript', 'css'],
        values: [90, 100, 90]
      },
      title: 'drawn-donut',
      titleFontSize: '18px',
      width: 400,
      fillWeight: 3,
      innerStrokeWidth: 1,
      strokeWidth: 3
    })
    this.drawnLine = new Drawn.Line({
      element: '#drawn-line',
      data: 'https://raw.githubusercontent.com/jwilber/random_data/master/profits.csv',
      y1: 'revenue',
      y2: 'cost',
      y3: 'profit'
    })
  },
  created () {
  }
}
</script>

<style scoped>

</style>
